<template>
<div>
  <span style="vertical-align:bottom;font-weight: bold;font-size: 18px;margin-right: 20px" :style="{color:$store.getters.theme === 'light'?'#000000':'#FFFFFF'}">常用功能</span>
  <span style="vertical-align:bottom;font-size: 14px;color: #666666">Common functions</span>
  <el-row style="margin-top: 12px">
    <el-col :span="4">
      <el-card shadow='never' style="margin-right: 10px;padding: 10px 24px">
        <svg-icon style="font-size: 45px;margin-bottom: 3px" icon-class="Commonly_1"/>
        <div style="display: inline-block;margin-left: 5px">
          <div><span style="position:absolute;margin-top: -15px;font-size: 18px;" :style="{color:$store.getters.theme === 'light'?'#000000':'#FFFFFF'}">客户订单</span></div>
          <div style="margin-top:10px;"><span style="font-size: 14px;color:#92929D">Customer order</span></div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card shadow='never' style="margin-left: 2px;margin-right: 8px;padding: 10px 24px">
        <svg-icon style="font-size: 45px;margin-bottom: 3px" icon-class="Commonly_2"/>
        <div style="display: inline-block;margin-left: 5px">
          <div><span style="position:absolute;margin-top: -15px;font-size: 18px;" :style="{color:$store.getters.theme === 'light'?'#000000':'#FFFFFF'}">原料库存分析</span></div>
          <div style="margin-top:10px;"><span style="font-size: 14px;color:#92929D" >Customer order</span></div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card shadow='never' style="margin-left: 4px;margin-right: 6px;padding: 10px 24px">
        <svg-icon style="font-size: 45px;margin-bottom: 3px" icon-class="Commonly_3"/>
        <div style="display: inline-block;margin-left: 5px">
          <div><span style="position:absolute;margin-top: -15px;font-size: 18px;" :style="{color:$store.getters.theme === 'light'?'#000000':'#FFFFFF'}">大屏数据分析</span></div>
          <div style="margin-top:10px;"><span style="font-size: 14px;color:#92929D">Customer order</span></div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card shadow='never' style="margin-left: 6px;margin-right: 4px;padding: 10px 24px">
        <svg-icon style="font-size: 45px;margin-bottom: 3px" icon-class="Commonly_4"/>
        <div style="display: inline-block;margin-left: 5px">
          <div><span style="position:absolute;margin-top: -15px;font-size: 18px;" :style="{color:$store.getters.theme === 'light'?'#000000':'#FFFFFF'}">设备详情</span></div>
          <div style="margin-top:10px;"><span style="font-size: 14px;color:#92929D" >Customer order</span></div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card shadow='never' style="margin-left: 8px;margin-right: 2px;padding: 10px 24px">
        <svg-icon style="font-size: 45px;margin-bottom: 3px" icon-class="Commonly_5"/>
        <div style="display: inline-block;margin-left: 5px">
          <div><span style="position:absolute;margin-top: -15px;font-size: 18px;" :style="{color:$store.getters.theme === 'light'?'#000000':'#FFFFFF'}">原料盘点分析</span></div>
          <div style="margin-top:10px;"><span style="font-size: 14px;color:#92929D" >Customer order</span></div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card shadow='never' style="margin-left: 10px;padding: 10px 24px">
        <svg-icon style="font-size: 45px;margin-bottom: 3px" icon-class="Commonly_6"/>
        <div style="display: inline-block;margin-left: 5px">
          <div ><span style="position:absolute;margin-top: -15px;font-size: 18px;" :style="{color:$store.getters.theme === 'light'?'#000000':'#FFFFFF'}">每天产能分析</span></div>
          <div style="margin-top:10px;"><span style="font-size: 14px;color:#92929D" >Customer order</span></div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row style="margin-top: 12px">
    <el-col :span="6">
      <el-card shadow='never' style="margin-right: 9px;padding: 0 10px">
        <div><span style="font-size: 20px;" :style="{color:$store.getters.theme === 'light'?'#000000':'#FFFFFF'}">订单总数量</span></div>
        <div style="margin-top: 18px">
          <span style="font-size: 40px;font-weight: 700;">27632</span>
          <span style="margin-left: 23px;color: #3DD598;font-size: 24px">+2.5%</span>
          <svg-icon style="font-size: 20px;fill:#3DD598 " icon-class="arrow-up"/>
        </div>
        <div style="margin-top: 18px">
          <span style="font-size: 20px;font-weight: 300;" :style="{color:$store.getters.theme === 'light'?'#999999':'#CCCCCC'}">比较于 (21340 上一年)</span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow='never' style="margin-left: 3px;margin-right: 6px;padding: 0 10px">
        <div><span style="font-size: 20px;" :style="{color:$store.getters.theme === 'light'?'#000000':'#FFFFFF'}">订单已安排数量</span></div>
        <div style="margin-top: 18px">
          <span style="font-size: 40px;font-weight: 700;">3921</span>
          <span style="margin-left: 23px;color: #3DD598;font-size: 24px">+2.5%</span>
          <svg-icon style="font-size: 20px;fill:#3DD598 " icon-class="arrow-up"/>
        </div>
        <div style="margin-top: 18px">
          <span style="font-size: 20px;font-weight: 300;" :style="{color:$store.getters.theme === 'light'?'#999999':'#CCCCCC'}">比较于 (2758 上一年)</span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow='never' style="margin-left: 6px;margin-right: 3px;padding: 0 10px">
        <div><span style="font-size: 20px;" :style="{color:$store.getters.theme === 'light'?'#000000':'#FFFFFF'}">订单总重量(吨)</span></div>
        <div style="margin-top: 18px">
          <span style="font-size: 40px;font-weight: 700;">28537.18</span>
          <span style="margin-left: 23px;color: #FC5A5A;font-size: 24px">-2.5%</span>
          <svg-icon style="font-size: 20px;fill:#FC5A5A " icon-class="arrow-down"/>
        </div>
        <div style="margin-top: 18px">
          <span style="font-size: 20px;font-weight: 300;" :style="{color:$store.getters.theme === 'light'?'#999999':'#CCCCCC'}">比较于 (29840 上一年)</span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow='never' style="margin-left: 9px;padding: 0 10px">
        <div><span style="font-size: 20px;" :style="{color:$store.getters.theme === 'light'?'#000000':'#FFFFFF'}">订单已安排重量(吨)</span></div>
        <div style="margin-top: 18px">
          <span style="font-size: 40px;font-weight: 700;">26260.34</span>
          <span style="margin-left: 23px;color: #3DD598;font-size: 24px">+2.5%</span>
          <svg-icon style="font-size: 20px;fill:#3DD598 " icon-class="arrow-up"/>
        </div>
        <div style="margin-top: 18px">
          <span style="font-size: 20px;font-weight: 300;" :style="{color:$store.getters.theme === 'light'?'#999999':'#CCCCCC'}">比较于 (21340 上一年)</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row style="margin-top: 12px" :style="{height:lastHeight}" >
    <el-col span="16" >
      <el-card shadow='never' :style="{height:lastHeight}" style="margin-right: 6px">
        <span slot="header">
           <span style="font-weight: bold">工业数据（天）KG</span>
        </span>
        <echart :style="{height:lastHeight}" style="margin-top:-70px;" :option="option1"/>
      </el-card>
    </el-col>
    <el-col span="8" >
      <el-card shadow='never' :style="{height:lastHeight}" style="margin-left: 6px">
        <span slot="header">
           <span style="font-weight: bold">直径分析产能 KG</span>
        </span>
        <echart :style="{height:lastHeight}" style="margin-top:-70px;" :option="option2"/>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>


export default {
  name: "demo2",
  data(){
    return {
      option1:{
        tooltip: {
          trigger: 'axis',
        },

        legend: {
          x:'right',
          y:'top',
          top:'3%',
          data: ['蓝色图例', '绿色图例']
        },
        grid:{
          left:'5%',
          right:'3%',
          bottom:'10%',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['01', '02', '03', '04', '05', '06', '07','08','09','10','11','12']
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '30%']
        },
        series: [
          {
            name: '蓝色图例',
            showSymbol: false,
            data: [201, 320, 450, 530, 700, 336, 490,643,534,234,321,254],
            type: 'line',
            smooth: true
          },
          {
            name: '绿色图例',
            showSymbol: false,
            data: [310, 220, 300, 270, 340, 526, 640,443,787,633,329,332],
            type: 'line',
            smooth: true
          }
        ]
      },
      option2:{
        legend: {
          bottom:'5%',
          formatter:(name)=>{
            let data = this.option2.series[0].data;
            let total = 0;
            let tarValue = 0;
            for (let i = 0, l = data.length; i < l; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            let p = ((tarValue / total) * 100).toFixed(0);
            return name + '\n'  + p + '%';
          },
          data:[{
            name:'12',
            icon:'circle'
          },{
            name:'14',
            icon:'circle'
          },{
            name:'16',
            icon:'circle'
          },{
            name:'18',
            icon:'circle'
          }]
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              normal: {
                show: true,
                position: 'center',
                color:'#4c4a4a',
                formatter: '{total|' + '22,870' +'}'+ '\n\r' + '{active|产能总计}',
                rich: {
                  total:{
                    fontSize: 35,
                    fontFamily : "微软雅黑",
                    color:'#999999'
                  },
                  active: {
                    fontFamily : "微软雅黑",
                    fontSize: 16,
                    color:'#6c7a89',
                    lineHeight:30,
                  },
                }
              },
              emphasis: {//中间文字显示
                show: true,
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: true
              },
              tooltip: {
                show: false
              }
            },
            data: [
              { value: 1048, name: '12' },
              { value: 735, name: '14' },
              { value: 580, name: '16' },
              { value: 484, name: '18' },
            ]
          }
        ]
      },
    }
  },
  methods:{
    doClickHeadTip(tip){
      console.log(tip);
    },
  },
  computed:{
    documentHeight(){
      return this.$store.getters.documentHeight
    },
    lastHeight() {
      const hei = this.$isFF?448:464//447
      return `${this.documentHeight - hei}px`
    }
  }
}
</script>

<style scoped>

</style>
